<template>
  <div>
    <el-input v-model="searchText" @input="handleSearch"></el-input>
    <div
      style="
        text-align: center;
        height: 20px;
        width: 100px;
        border: 1px solid red;
        border-radius: 5px;
      "
    ></div>
    <!-- 显示搜索结果 -->
    <ul v-if="searchResults.length > 0">
      <li v-for="result in searchResults" :key="result.id">
        {{ result.name }}
      </li>
    </ul>
    <template>
      <el-table :data="tableData" height="250" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180">
          <template slot-scope="scpoe">
            开始时间：{{ formDate(scpoe.row.Date) }}
            <span v-for="(item, index) in tableChildrenList" :key="index">
              {{ item.message }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </template>
  </div>
</template>

<script type="ts">
import { parseTime } from '@/utils/index'
export default {
  name:'TreeTemplate',
  data() {
    return {
      searchText: '', // 绑定输入框的文本
      searchResults: [], // 存储搜索结果
      offset:1,
      limit:20,
      tableData:[],
    };
  },
  watch:{
  },
  created() {
  },
  methods: {
    formDate(time){
      if(time == '')return
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
    },
    handleSearch(e) {
      this.searchResults = this.searchList.filter(item =>
        item.name.toLowerCase().includes(this.searchText.toLowerCase())
      );
    },
   },
};
</script>
<style scoped>
.boxImg {
  height: 100px;
  width: 100px;
  border: 1px solid red;
  border-radius: 10px;
  font-size: 20px;
  font-width: blod;
  margin: 0 auto;
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI",
    sans-serif;
  background: #ccc;
  color: #00b8ff;
}
</style>
